<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax demo</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="css/pico.min.css" />
  </head>
  <body>
    <script>
      function postWithXHR() {
        // 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();
        // 定义 onload 回调函数：当请求成功时，打印响应内容
        xhr.onload = function () {
          if (xhr.status === 200) {
            const res = JSON.parse(xhr.responseText);
            if (res.success) {
              alert("注册成功");
            } else {
              alert("注册失败:" + res.message);
              // 动态创建 dom 元素
              const div = document.createElement("div");
              // innerHTML 功能强大，但如果内容复杂，性能很差
              div.style.color = "red";
              div.innerHTML = res.message;
              document.body.appendChild(div);
            }
          } else {
            // 请求失败时，打印错误信息
            console.error(`请求失败，状态码：${xhr.status}`);
          }
        };
        // 定义 onerror 回调函数：当请求失败时，打印错误信息
        xhr.onerror = function () {
          console.error("请求失败，请检查网络连接");
        };
        // 调用 open 方法初始化请求
        xhr.open("POST", "http://localhost:3000/register", true);
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        // 调用 send 方法发送请求
        xhr.send("username=xxx&password=12433");
      }
      async function loginWithAxios() {
        // 获取表单数据
        const form = document.querySelector("form");
        // 使用 FormData 对象获取表单数据，需要注意 input 的 name 属性是必须的
        const formData = new FormData(form);
        const values = Object.fromEntries(formData.entries());
        // 使用 axios 发起 POST 请求
        const response = await axios.post("/login", values, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        });
        const data = response.data;
        if (data.success) {
          alert("登录成功");
        } else {
          alert("登录失败:" + data.message);
        }
      }

      async function login() {
        // 获取表单数据
        const form = document.querySelector("form");
        const username = form.username.value;
        const password = form.password.value;
        // 使用自己封装的 request 函数发起 POST 请求
        const data = await request("/login", {
          method: "POST",
          data: "username=xxx&password=123",
        });
        if (data.success) {
          alert("登录成功");
        } else {
          alert("登录失败:" + data.message);
        }
      }
      // 使用 Promise 封装 XmlHttpRequest 对象的 request 函数
      function request(url, options) {
        const { method = "GET", data = null } = options;
        return new Promise((resolve, reject) => {
          // 创建 XMLHttpRequest 对象
          const xhr = new XMLHttpRequest();
          // 定义 onload 回调函数：当请求成功时，打印响应内容
          xhr.onload = function () {
            if (xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject(new Error(`请求失败，状态码：${xhr.status}`));
            }
          };
          // 定义 onerror 回调函数：当请求失败时，打印错误信息
          xhr.onerror = function () {
            reject(new Error("请求失败，请检查网络连接"));
          };
          // 调用 open 方法初始化请求
          xhr.open(method, url);
          xhr.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
          );
          // 调用 send 方法发送请求
          xhr.send(data);
        });
      }
      // fetch 是 html5 新增的 API
      async function loginWithFetch() {
        // 获取表单数据
        const username = document.querySelector("#username").value;
        const password = document.querySelector('input[name="password"]').value;
        // 使用 fetch 发起 POST 请求
        const response = await fetch("/api/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          body: `username=${username}&password=${password}`,
        });
        const data = await response.json();
        if (data.success) {
          alert("登录成功");
        } else {
          alert("登录失败:" + data.message);
        }
      }
      function onSubmit(e) {
        // 阻止默认行为，如提交表单
        e.preventDefault();
        loginWithFetch();
      }
      async function onRegister(e) {
        // 阻止默认行为，如提交表单
        e.preventDefault();
        // 获取表单数据
        const formData = new FormData(this);
        const values = Object.fromEntries(formData.entries());
        // 使用 axios 发起 POST 请求
        const response = await axios.post("/api/register", values);
        const data = response.data;
        if (data.success) {
          alert("注册成功");
        } else {
          alert("注册失败:" + data.message);
        }
      }
      window.onload = () => {
        document.querySelector("form").addEventListener("sumbit", onSubmit);
        //
        document
          .querySelector("#register")
          .addEventListener("submit", onRegister);
      };
    </script>
    <button id="btn" onclick="postAjax()">发起 Ajax 请求</button>
    <button onclick="login()">登录</button>
    <button onclick="loginWithAxios()">登录 with axios</button>
    <button onclick="loginWithFetch()">登录 with fetch</button>
    <main class="container">
      <form onsubmit="">
        <h2>用户登录</h2>
        <div>
          <label for="username">用户名</label>
          <input type="text" name="username" id="username" value="admin" />
        </div>
        <div>
          <label for="password">密码</label>
          <input type="password" name="password" value="123456" />
        </div>

        <button>登录</button>
      </form>

      <form id="register">
        <h2>用户注册</h2>
        <div>
          <label for="username">用户名</label>
          <input type="text" name="username" id="username" />
        </div>
        <div>
          <label for="password">密码</label>
          <input type="password" name="password" id="password" />
        </div>
        <div>
          <label for="confirmPassword">确认密码</label>
          <input type="password" name="confirmPassword" id="confirmPassword" />
        </div>
        <div>
          <label for="nickname">昵称</label>
          <input type="text" name="nickname" id="nickname" />
        </div>
        <button>注册</button>
        <button type="reset">重置</button>
      </form>
    </main>
  </body>
</html>
